<template>
  <div class="app-container">
    <el-table :data="classifyList" style="width: 96%" max-height="500px">
      <el-table-column label="#" width="180" type="index"> </el-table-column>
      <el-table-column label="类名" width="250">
        <template slot-scope="scope">
          <el-input
            v-model="form.name"
            placeholder="请输入新增类名"
            v-if="scope.$index == 0"
          ></el-input>
          <div v-else @dblclick="dblClickHandle(scope)">
            <el-input
              v-model="listIpt"
              v-if="idx == scope.$index"
              @blur="onBlur(scope)"
              v-focus
            ></el-input>
            <el-button v-else size="mini" @click="handleEdit(scope.row)">{{
              scope.row.name
            }}</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleAdd(scope.$index)"
            v-if="!scope.$index"
            >保存</el-button
          >
          <template slot-scope="scope" v-else>
            <el-button size="mini" @click="handleEdit(scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      // input: "",
      listIpt: "",
      idx: null,
      form: {},
    };
  },
  async mounted() {
    await this.getCid();
  },
  methods: {
    ...mapActions("classify", ["getCid", "addList", "delList", "updateList"]),
    async handleAdd() {
      if (!this.form.name) {
        this.$message({
          message: "请输入您要新增的类别名称！！！",
          type: "warning",
        });
        return;
      }

      if (this.form.id) {
        await this.updateList(this.form);
        this.form.name = "";
        this.$message({
          message: "修改成功！",
          type: "success",
        });
      } else {
        await this.addList(this.form);
        this.form.name = "";
        this.$message({
          message: "新增成功！",
          type: "success",
        });
      }
    },
    handleEdit(row) {
      this.form = { ...row };
      this.input = row.name;
    },
    dblClickHandle(scope) {
      this.idx = scope.$index;
      this.listIpt = scope.row.name;
    },
    async onBlur(scope) {
      this.idx = null;
      if (this.listIpt == scope.row.name) {
        this.$message({
          message: "您未作出任何修改！",
          type: "warning",
        });
      } else {
        await this.updateList({
          id: scope.row.id,
          name: this.listIpt,
        });
        this.$message({
          type: "success",
          message: "消息提示：修改成功！",
        });
      }
    },
    handleDelete(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await this.delList({
            id,
          });
          this.$message({
            type: "success",
            message: "消息提示：删除成功！",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "消息提示：已取消删除！",
          });
        });
    },
  },
  computed: {
    ...mapState("classify", ["classifyList"]),
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.childNodes[1].focus();
      },
    },
  },
};
</script>

<style scoped>
</style>